
<script setup >
//导入
import { ref } from 'vue'
import SonCom from './son-com.vue'

//定义属性
const money = ref(100)

//父组件增加金额
const incMoney = () => {
  money.value += 10
}

//子组件减少金额
const decMoney = (val) => {
  money.value -= val
}
</script>

<template>
  <div class="con">
    <h3 class="tit">
      <button @click="incMoney" class="defaultButton">+ 增加金额</button>
      <button @click="decMoney(20)" class="defaultButton">- 减少金额</button>
    </h3>
    <SonCom :money="money" @decMoney="decMoney"></SonCom>
  </div>
</template>
    <style scoped>
.con {
  width: 600px;
  padding: 30px;
  border: 1px solid #c0c0c0;
  border-radius: 12px;
  background: rgb(219, 215, 228);
}
.tit {
  padding-bottom: 10px;
}
:deep(.defaultButton) {
  background: rgb(237, 241, 251);
  border: 1px solid rgb(207, 195, 250);
  width: 80px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
}
.defaultButton:active,
.defaultButton:visited,
.defaultButton:focus {
  background: rgb(237, 241, 251);
}
</style>
